<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model.number="num1"> + 
        <input type="text" v-model.number="num2"> =

        <!-- 计算属性也可以像普通属性一样来用，普通属性能怎么用，计算属性就能怎么用 -->
        <span>{{ sum }}</span>
        <span>{{ sum }}</span>
        <span>{{ sum }}</span>
        <span>{{ sum }}</span>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    num1: 0,
                    num2: 0
                }
            },
            methods: {
                // sum () {
                //     console.log('methods调用了')
                //     return this.num1 + this.num2
                // }
            },
            // 写计算属性的地方
            computed: {
                // 计算属性有缓存：
                // 第一次时调用一次，然后得到一个结果，它就把结果缓存起来了
                // 后面再用都是从缓存里取的。但是直到它的任何一个依赖项发生变化
                // 就会再来重新调用再得到一个新的结果，再把新的结果缓存起来
                sum () {
                    console.log('计算属性sum调用了')
                    return this.num1 + this.num2
                }
            }
        })
    </script>
</body>
</html>